<template>
  <view class="wrapper">
    <uni-forms :modelValue="formData">
      <uni-forms-item label="头像" name="avatar">
        <uni-file-picker @delete="onDelete" @select="onSelect" :value="fileList" limit="1"></uni-file-picker>
      </uni-forms-item>
      <uni-forms-item label="姓名" name="name">
        <uni-easyinput type="text" :disabled="true" v-model="formData.nickName" placeholder="请输入姓名" />
      </uni-forms-item>
      <uni-forms-item label="电话" name="phone">
        <uni-easyinput type="text" :disabled="true" v-model="formData.phone" placeholder="请输入电话" />
      </uni-forms-item>
      <uni-forms-item label="分组" name="phone">
        <uni-easyinput type="text" :disabled="true" v-model="dept" placeholder="请输入电话" />
      </uni-forms-item>
      <uni-forms-item label="生日" name="phone">
        <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday" placeholder="请选择生日" @/>
      </uni-forms-item>
      <uni-forms-item label="性别" name="email">
        <uni-data-select
          v-model="formData.sex"
          :localdata="range"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="邮箱" name="email">
        <uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
      </uni-forms-item>
      <uni-forms-item label="新密码" name="email">
        <uni-easyinput type="password" v-model="formData.password" placeholder="请输入新密码" />
      </uni-forms-item>
      <uni-forms-item label="签名" name="personalSignature">
        <uni-easyinput type="textarea" v-model="formData.personalSignature" placeholder="请输入个性签名" />
      </uni-forms-item>
    </uni-forms>
    <button @click="submitForm" type="primary">提交</button>
  </view>
</template>

<script>
  import {
    getUserInfo,
    messageSuccess
  } from '../../utils';
  import {
    getDeptList,
    getInfo,
    postInfo,
    updateInfo
  } from '../../utils/api';
  import uploadFile from '../../utils/upload';
  export default {
    computed: {
      dept() {
        const map = this.deptList.reduce((prev, next) => {
          return {
            ...prev,
            [next.deptId]: next
          }
        }, {})
        return map[this.formData.deptId]?.deptName
      },
      fileList() {
        const {
          headImg
        } = this.formData
        if (!headImg) {
          return []
        }
        return [{url: headImg}]
      }
    },
    data() {
      return {
        deptList: [],
        range:  [{value: '男',text: '男'}, {value: '女', text: '女'}, {value: '隐藏', text: '隐藏'}],
        formData: {
          nickName: '',
          phone: '',
          email: '',
          wechat: '',
          address: ''
        }
      };
    },
    async onLoad() {
      this.getDept()
      this.formData = await getInfo()
    },
    methods: {
      getDept() {
        getDeptList().then(res => {
          this.deptList = res
        })
      },
      onDelete() {
        this.formData.headImg = ''
      },
      onSelect(e) {
        this.formData.headImg = e.tempFiles[0].url
      },
      async submitForm() {
        // 上传图片
        let file = ''
        const curFile = this.fileList[0]
        if (curFile && curFile.url.indexOf('https') !== 0) {
          const res = await uploadFile(curFile)
          file = res.data.fileUrl.replace('/home/appserver/attachments', 'https://oa.tasystem-bj.online:8901/attach')
        }
        if (file) {
          this.formData.headImg = file
        }
        const pwd = this.formData.password
        if (!pwd) {
          delete this.formData.password
        }
        // // 上传数据
        await updateInfo(this.formData)
        if (pwd) {
          uni.showModal({
            title: '提示',
            content: '密码已修改，请重新登录',
            showCancel:false,
            success() {
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }
          })
        } else {
          messageSuccess()
        }
      }
    }
  }
</script>

<style lang="scss">
  .wrapper {
    padding: 20rpx;
  }
</style>